<template>
	<div>
		<el-dialog title="会员账户充值" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="900px">
			<div class="form-box">
				<el-form ref="form" :model="form" :rules="rules" label-width="110px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="会员昵称">
								<el-input v-model="userInfo.nickName" readonly></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="手机号">
								<el-input v-model="userInfo.phone" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="账户余额">
								<el-input v-model="userInfo.balance" readonly></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="充值金额" prop="rechargeAmount">
								<el-input v-model="form.rechargeAmount" placeholder="请输入金额" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="关联订单" prop="serialNum">
								<el-input v-model="form.serialNum" placeholder="请选择关联的充值订单，关联订单号用于后续对账" readonly>
									<el-button slot="append" @click="openOrderDialog">选择订单</el-button>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			
			<div slot="footer">
				<el-button type="primary" loading v-if="isLoading">充值中...</el-button>
				<el-button type="primary" @click="submit" v-else>确认充值</el-button>
				<!-- <el-button @click="reset" v-if="!isEdit">重 置</el-button> -->
				<el-button @click="close">取 消</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="选择关联订单" :visible.sync="isShowOrderDialog" :close-on-click-modal="false" :before-close="closeOrderDialog" width="1400px">
			<div class="form-box">
				<el-table :data="tableData" border stripe>
					<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
					
					<el-table-column prop="orderNo" label="订单编号" width="200"></el-table-column>
					<el-table-column prop="saleChannel" label="销售渠道" width="110" align="center">
						<template slot-scope="scope">
							<el-tag size="mini" v-if="scope.row.saleChannel == 2">直播平台</el-tag>
							<el-tag size="mini" type="warning" v-else-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
							<el-tag size="mini" type="success" v-else>微信小程序</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="userPhone" label="会员账号" width="120"></el-table-column>
					
					<el-table-column prop="orderAmount" label="订单金额(元)" :formatter="forMoney" width="120" align="center"></el-table-column>
					
					<el-table-column prop="orderStatus" label="订单状态" width="110" align="center">
						<template slot-scope="scope">
							<el-tag type="danger" v-if="scope.row.orderStatus == 1">待付款</el-tag>
							<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 4">订单已退款</el-tag>
							<el-tag type="warning" v-else-if="scope.row.orderStatus === 2 && scope.row.pickupStatus < 3">已付款，待提货</el-tag>
							<el-tag type="info" v-else-if="scope.row.orderStatus===2 && scope.row.afterSalesStatus == 4">交易关闭（售后退款）</el-tag>
							<el-tag type="info" v-else-if="scope.row.orderStatus == 3">订单已取消</el-tag>
							<el-tag type="success" v-else-if="scope.row.orderStatus == 4">已完成</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column prop="pickupNo" label="提货码" width="140"></el-table-column>
					<el-table-column prop="pickupStatus" label="提货状态" width="100" align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.orderStatus == 1 || scope.row.orderStatus == 3">-</span>
							<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 4">已退款</el-tag>
							<el-tag type="warning" v-else-if="scope.row.pickupStatus == 1">备货中</el-tag>
							<el-tag type="warning" v-else-if="scope.row.pickupStatus == 2">待提货</el-tag>
							<el-tag type="success" v-else-if="scope.row.pickupStatus == 3">已提货</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column prop="afterSalesStatus" label="售后状态" width="90" align="center">
						<template slot-scope="scope">
							<span style="color: #ccc;" v-if="scope.row.afterSalesStatus == 0">无售后</span>
							<el-tag type="warning" v-else-if="scope.row.afterSalesStatus == 1">部分退款中</el-tag>
							<el-tag type="warning" v-else-if="scope.row.afterSalesStatus == 2">全部退款中</el-tag>
							<el-tag type="" v-else-if="scope.row.afterSalesStatus == 3">已部分退款</el-tag>
							<el-tag type="" v-else-if="scope.row.afterSalesStatus == 4">已全部退款</el-tag>
							<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 5">已撤销</el-tag>
						</template>
					</el-table-column>
					
					<el-table-column prop="createTime" label="下单时间" :formatter="forDate" width="96"></el-table-column>
					<el-table-column prop="payTime" label="支付时间" :formatter="forDate" width="96"></el-table-column>
					<el-table-column prop="pickupTime" label="提货时间" :formatter="forDate" width="96"></el-table-column>
					
					<el-table-column fixed="right" label="操作" width="120">
						<template slot-scope="scope">
							<el-button type="info" size="small" v-if="form.serialNum == scope.row.orderNo">已选择</el-button>
							<el-button type="primary" size="small" @click="chooseOrder(scope.row)" v-else>选择订单</el-button>
						</template>
					</el-table-column>
				</el-table>
				
				<div class="page">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-size="pageSize"
						:total="total"
						:page-sizes="[10, 20, 50, 100]"
						layout="total, sizes, prev, pager, next, jumper"
					></el-pagination>
				</div>
			</div>
			
			<div slot="footer">
				<el-button @click="closeOrderDialog">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { memberAccountCharge } from '@api/shopCashierChangeShift/shopCashierChangeShift'
	import { getOrderInfoByPage } from '@api/order/order'
	import dayjs from 'dayjs'
	export default {
		props: {
			isShow: Boolean,
			userInfo: Object,
		},
		data() {
			let validateAmount = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入充值金额'));
				} else if(!(/^\d+(\.\d{1,2})?$/.test(value))) {
					callback(new Error('请检查金额格式是否正确'));
				} else {
					callback();
				}
			}
			return {
				form: {
					accountId: '',
					rechargeAmount: '',
					serialNum: '',
				},
				rules: {
					rechargeAmount: [{ required: true, validator: validateAmount, trigger: 'blur' }],
				},
				isLoading: false,
				
				isShowOrderDialog: false,
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
			}
		},
		methods: {
			submit() { //提交充值
				this.$refs.form.validate(valid => {
					if(valid) {
						this.isLoading = true;
						let params = {
							accountId: this.userInfo.id,
							rechargeAmount: this.form.rechargeAmount,
							serialNum: this.form.serialNum,
						}
						memberAccountCharge(params)
							.then(() => {
								this.$message.success('会员账户充值成功！');
								this.isLoading = false;
								
								this.$emit('submit');
								this.close();
							})
							.catch(() => {
								this.isLoading = false;
							})
					}
				})
			},
			reset() {
				this.$refs.form.resetFields();
				
			},
			
			//获取会员订单
			openOrderDialog() {
				this.isShowOrderDialog = true;
				
				getOrderInfoByPage({
					orderType: 2,
					orderStatus: 4,
					afterSaleStatus: 0,
					userName: this.userInfo.phone,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			forDate(row, column) {
				var formatTime = ''
				if (column.property == 'createTime') {
					formatTime = row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'payTime') {
					formatTime = row.payTime == null ? '-' : dayjs(row.payTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'printTime') {
					formatTime = row.printTime == null ? '-' : dayjs(row.printTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'planPickupTime') {
					formatTime = row.planPickupTime == null ? '-' : dayjs(row.planPickupTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'pickupTime') {
					formatTime = row.pickupTime == null ? '-' : dayjs(row.pickupTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'refundTime') {
					formatTime = row.refundTime == null ? '-' : dayjs(row.refundTime).format('YYYY-MM-DD HH:mm:ss');
				}
				return formatTime;
			},
			forMoney(row, column) {
				let money = '';
				if (column.property == 'orderAmount') {
					money = row.orderAmount == null ? '0.00' : row.orderAmount.toFixed(2);
				}
				if (column.property == 'couponAmount') {
					money = row.isMemberPay == 0 || row.couponAmount == null || row.couponAmount == 0 ? '-' : row.couponAmount + '元券';
				}
				return money;
			},
			closeOrderDialog() {
				this.isShowOrderDialog = false;
			},
			
			chooseOrder(item) {
				this.form.serialNum = item.orderNo;
				this.closeOrderDialog();
			},
			
			close() {
				this.$emit('close');
				this.reset();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		margin-top: 20px;
	}
</style>